<template>
  <view :style="style" class="base-container">
    <view v-if="$slots.head" class="header">
      <slot name="head"/>
    </view>
    <scroll-view :style="contentViewStyle" scroll-y="true">
      <slot/>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    style: {type: Object, default: () => ({'background-color': '#ffffff'})},
    contentStyle: {type: Object, default: () => ({'background-color': '#ffffff'})},
  },
  data() {
    return {};
  },
  computed: {
    contentViewStyle() {
      let height = 0;
      if (this.$slots.head) {
        height += 150;
      }
      return {
        height: `calc(100vh - ${height}rpx)`,
        ...this.contentStyle
      }
    }
  }
}
</script>

<style lang="scss">
.base-container {
  .header {
    height: 200rpx;
  }
}
</style>
